<template>
  <div>
    <!--头部导航-->
    <!-- <h1 v-if="isLoading">加载中...</h1> -->
    <!-- <message-index type="error" :message="error.message" v-if="error.status"></message-index> -->
    <!-- <h1>{{ error.message }}</h1> -->
    <!-- <form action="" method="post" enctype="multipart/form-data">
      <input type="file">
    </form> -->
    <loader-ing v-if="isLoading" text="我已经在拼命加载了"></loader-ing>
    <global-header :user="currentUser"></global-header>
    <!-- <uploader-file
      action="/upload"
      :beforeUpload="beforeUpload"
      @file-uploaded="onFileUploaded"
    >
      <h2>点击上传</h2>
      <template #loading>
        <div class="spinner-boder" role="status">
          <span class="sr-only"></span>
        </div>
      </template> -->
    <!--
        接收参数的格式
        dataProps: {
          uploadedData: {
            type
          }
        }
       -->
    <!-- <template #uploaded="dataProps">
        <img :src="dataProps.uploadedData.data.url" alt="" width="500" />
      </template>
    </uploader-file> -->
    <router-view></router-view>
    <footer class="text-center py-4 text-seconder bg-light mt-6">
      <small>
        <ul class="list-inline mb-0">
          <li class="list-inline-item">专栏</li>
          <li class="list-inline-item">文档</li>
          <li class="list-inline-item">详情</li>
          <li class="list-inline-item">地址</li>
          <li class="list-inline-item">联系</li>
        </ul>
      </small>
    </footer>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted, watch } from 'vue'
import GlobalHeader from './components/GlobalHeader.vue'
import LoaderIng from './components/LoaderIng.vue'
// import MessageIndex from './components/MessageIndex.vue'
import createMessage from './hooks/createMessage'
import { useStore } from 'vuex'
import axios from 'axios'
import { GolbalDataProps, ResponseType, ImageProps } from './store'
import UploaderFile from './components/UploaderFile.vue'

// 用户消息和登录状态
// const currentUser: Userprops = {
//   isLogin: false,
//   name: 'zhang'
// }

export default defineComponent({
  name: 'App',
  components: {
    GlobalHeader,
    LoaderIng
    // UploaderFile
    // MessageIndex
  },
  setup () {
    const store = useStore<GolbalDataProps>()
    const currentUser = computed(() => store.state.user)
    const isLoading = computed(() => store.state.loading)
    const token = computed(() => store.state.token)
    const error = computed(() => store.state.error)
    onMounted(() => {
      // 此处 XXX (为获取的用户名，为XXX表示没有获取到用户名)
      // isLogin 为 false 头部显示的为 登录和注册 就算是 token 值保存到本地了也没有意义
      // isLogin 为 true 头部显示的是 你好 XXX 此时 XXX 并没有获取到用户信息，前提是 已经保存了 token
      // 为什么 isLogin 要取反，它的初始值为 false 在第一次登录之后值为 true 但是在刷新的时候就会变回初始值
      // if (!currentUser.value.isLogin && token.value) {
      //   axios.defaults.headers.common.Authorization = `Bearer ${token.value}`
      //   // 再次获取用户信息，使 XXX 变成我们登录的用户名
      //   // 为什么如下大方式不可行
      //   // 因为此时去执行的 login 登录的请求没有获取到 登录所需的值
      //   // store.dispatch('loginAndFecth')
      //   // 解决方案如下：
      //   // const payload = {
      //   //   email: '111@test.com',
      //   //   password: '111111'
      //   // }
      //   // store.dispatch('loginAndFecth', payload)
      //   store.dispatch('fetchCurrentUser')
      // }
      watch(
        () => error.value.status,
        () => {
          const { status, message } = error.value
          if (status && message) {
            createMessage(message, 'error')
          }
        }
      )
    })
    // 验证传入的图片格式
    // const beforeUpload = (file: File) => {
    //   console.log(File)
    //   const isJPG = file.type === 'image/jpeg'
    //   if (!isJPG) {
    //     createMessage('上传图片只能是 JPG 格式！', 'error')
    //   }
    //   return isJPG
    // }
    // const onFileUploaded = (rawData: ResponseType<ImageProps>) => {
    //   createMessage(`上传图片 ID ${rawData.data._id}`, 'success')
    // }
    return {
      currentUser,
      isLoading,
      error
      // beforeUpload,
      // onFileUploaded
    }
  }
})
</script>

<style></style>

<!-- <template>
  <div>
    <global-header :user="currentUser"></global-header>
    <ValidateForm @form-submit="onFormSubmit">
      <div class="mb-3">
        <label for="exampleFormControlInput1" class="form-label"
          >邮箱地址</label
        > -->
<!-- <input
          type="email"
          class="form-control"
          id="exampleFormControlInput1"
          v-model="emailRef.val"
          @blur="validateEmail"
        /> -->
<!-- 提示信息 -->
<!-- <div class="form-text" v-if="emailRef.error">{{ emailRef.message }}</div> -->
<!-- <validate-input
          placeholder="请输入正确电子邮箱地址"
          v-model="emailVal"
          :rules="emailRules"
          @value="emailValue"
        ></validate-input>
      </div>
      <div class="mb-3">
        <label for="exampleFormControlTextarea1" class="form-label">密码</label>
        <validate-input
          placeholder="请输入密码"
          v-model="passwordVal"
          :rules="passwordRules"
        ></validate-input>
      </div>
      <template #submit> -->
<!-- <span class="btn btn-danger">登录</span>
      </template>
    </ValidateForm>
    <colmun-list :list="list"></colmun-list>
  </div>
</template> -->

<!-- <script lang="ts">
import { defineComponent, ref } from 'vue'
import GlobalHeader, { UserProps } from './components/GlobalHeader.vue'
import ColmunList, { ColumnProps } from './components/ColmunList.vue'
import ValidateInput, { RulesProp } from './components/ValidateInput.vue'
import ValidateForm from './components/ValidateForm.vue'

// 专栏列表数据
const testData: ColumnProps[] = [
  {
    id: 1,
    title: 'test的专栏',
    description: '这个非常有意思',
    avatar: ''
  },
  {
    id: 1,
    title: 'test的专栏',
    description: '这个非常有意思',
    avatar:
      'https://pica.zhimg.com/v2-826c5b7d2bb7428933b82012760c63a2_l.jpg?source=d16d100b'
  },
  {
    id: 1,
    title: 'test的专栏',
    description: '这个非常有意思',
    avatar:
      'https://pica.zhimg.com/v2-826c5b7d2bb7428933b82012760c63a2_l.jpg?source=d16d100b'
  },
  {
    id: 1,
    title: 'test的专栏',
    description: '这个非常有意思',
    avatar:
      'https://pica.zhimg.com/v2-826c5b7d2bb7428933b82012760c63a2_l.jpg?source=d16d100b'
  }
]
// 用户信息和登录状态
const currentUser: UserProps = {
  isLogin: false,
  name: '迪迦奥特曼'
} -->

<!-- // 邮箱正则
// const emailReg =
//   /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/ -->

<!-- export default defineComponent({
  name: 'APP',
  components: {
    ColmunList,
    GlobalHeader,
    ValidateInput,
    ValidateForm
  },
  setup () {
    const emailVal = ref('你好')
    const emailRules: RulesProp = [
      // 这个是邮箱的规则，应该被这个东西所约束
      { type: 'required', message: '电子邮箱地址不能为空' }, // 这个是必填项
      { type: 'email', message: '请输入正确的电子邮箱格式' }
    ]
    const passwordVal = ref('123')
    const passwordRules: RulesProp = [
      { type: 'required', message: '密码不能为空' }
    ]
    const emailValue = (val: string) => {
      emailVal.value = val
    }
    // 登录
    const onFormSubmit = (result: boolean) => {
      console.log('123', result)
      if (result) {
        // 发送登录
      }
    }
    // 邮箱的验证规则
    // const emailRef = reactive({
    //   val: '', // 内容
    //   error: false, // 返回一个错误，就是给它一个错误信息
    //   message: '' // 返回的错误信息
    // })
    // 失焦事件
    // const validateEmail = () => {
    //   if (emailRef.val.trim() === '') {
    //     emailRef.error = true
    //     emailRef.message = '邮箱不能为空'
    //   } else if (!emailReg.test(emailRef.val)) {
    //     emailRef.error = true
    //     emailRef.message = '输入的邮箱格式不正确'
    //   }
    // }
    return {
      list: testData,
      currentUser,
      // emailRef,
      emailRules,
      // validateEmail
      emailVal,
      emailValue,
      onFormSubmit,
      passwordVal,
      passwordRules
    }
  }
})
</script> -->

<!-- <style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; */
/* text-align: center;
  color: #2c3e50; */
/* } */

/* nav {
  padding: 30px;
} */

/* nav a {
  font-weight: bold; */
/* color: #2c3e50; */
/* } */
</style> -->
